<template>
    <div>
        <h3>hello socket</h3>
        <p>【userId】:</p>
        <div><input id="userId" name="userId" type="text" :value="userId"></div>
        <p>【toUserId】:</p>
        <div><input id="toUserId" name="toUserId" type="text" :value="toUserId"></div>
        <p>【消息内容】:</p>
        <div><input id="contentText" name="contentText" type="text" :value="contentText"></div>
        <p>操作:</p>
        <div style="color: green"><button @click="openSocket">开启socket</button></div>
        <p>操作:</p>
        <div style="color: green"><button @click="closeSocket">断开socket</button></div>
        <p>【操作】:</p>
        <div style="color: green"><button @click="sendMessage">发送消息</button></div>
    </div>
</template>

<script>
export default {
    name: '',
    components: {
    },
    data() {
        return {
            socket: null,
            userId: 10,
            toUserId: 20,
            contentText: 'hello websocket',
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        openSocket() {
            console.log('点击')
            if (typeof (WebSocket) == "undefined") {
                alert("您的浏览器不支持WebSocket");
            } else {

                if (this.socket != null) {
                    return;
                }

                //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
                // var socketUrl="ws://127.0.0.1:22599/webSocket/"+userId;
                var socketUrl = "ws://localhost:8080/websocket/test/111";
                console.log(socketUrl);


                this.socket = new WebSocket(socketUrl);
                //打开事件
                this.socket.onopen = function () {
                    console.log("websocket已打开");
                    //socket.send("这是来自客户端的消息" + location.href + new Date());
                };
                //获得消息事件
                this.socket.onmessage = function (msg) {
                    var serverMsg = "收到服务端信息：" + msg.data;
                    console.log(serverMsg);
                    //发现消息进入    开始处理前端触发逻辑
                };
                //关闭事件
                this.socket.onclose = function () {
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                this.socket.onerror = function () {
                    console.log("websocket发生了错误");
                }
            }
        },
        sendMessage() {
            if (this.socket === undefined || this.socket === null) {
                alert("请先连接");
                return;
            }
            if (typeof (WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            } else {
                // console.log("您的浏览器支持WebSocket");
                var msg = '{"userId":"' + this.toUserId + '","message":"' + this.contentText + '"}';
                console.log(msg);
                this.socket.send(msg);
            }
        },
        closeSocket() {
            if (this.socket === undefined || this.socket === null) {
                alert("请先连接");
                return;
            }
            this.socket.close();
            this.socket = null;
        }

    },
}
</script> 

<style scoped>

</style>
